<%@ page language="java" pageEncoding="UTF-8" contentType="text/html;charset=UTF-8"%>
<%@ include file="/common/taglibs.jsp"%>
<!DOCTYPE HTML>
<html>
	<head>
		<title>用户首页</title>
		<%@ include file="/common/meta.jsp"%>
		<link rel="stylesheet" type="text/css" href="${ctx}/css/reset.css"/>
		<link rel="stylesheet" type="text/css" href="${ctx}/css/home.css" />
		<script type="text/javascript" src="${ctx}/js/jquery-1.7.2.min.js"></script>
		<script type="text/javascript" src="${ctx}/js/home.js"></script>
		<script type="text/javascript" src="${ctx}/js/swfobject.js"></script>
	</head>
	<body>
		<%@ include file="/common/userHead.jsp"%>
		<div class="container clearfix">
			<div class="followinfo">
				<div class="userinfo">
					<dl class="user clearfix">
						<dt><img src="${ctx}/images/cjz.jpg" alt="成家梓" width="60" height="60" /></dt>
						<dd><h2>成家梓</h2></dd>
					</dl>
					<ul class="num clearfix">
						<li class="first">关注<a href="#"><strong>31</strong></a></li>
						<li>被关注<a href="#"><strong>152</strong></a></li>
					</ul>
				</div>
				<div class="mhistory">
					<a href="javascript:void(0)">看病记录</a><br>
					<a href="javascript:void(0)">我的病例</a>
				</div>
			</div>
			<div class="main">
				<div class="talk"><a href="javascript:void(0);" onclick="submitTalk()">发布</a><textarea name="" id="mytalk"></textarea></div>
				<dl id="newsmenu" class="news">
					<dt class="items clearfix">
						<a href="javascript:void(0)" rel="#all" class="selected">所有人</a>
						<a href="javascript:void(0)" rel="#doctor">医师</a>
						<a href="javascript:void(0)" rel="#user">用户</a>
						<a href="javascript:void(0)" rel="#tagnews">标签</a>
					</dt>
					<dd class="itemconts">
						<div id="all">
							<c:forEach items="${talkList}" var="list">
								<div class="talktalk">
									<div class="talker">
										<a href="javascript:void(0);"><img src="${ctx}/${list.headUrl}" alt="" width="50" height="50" class="head" /></a>
									</div>
									<div class="talkcont">
										<p><a href="javascript:void(0);">${list.name}</a>：${list.content}</p>
										<div class="extension">
											<div class="talktime"><span>${list.talkDate}</span></div>
											<div style="padding: 10px 10px 10px 0;">
												<textarea rows="2" cols="55"></textarea>
												<input type="button" value="评论" onclick="submitCmt(${list.id},this)"/>
											</div>
										</div>
									</div>
								</div>
							</c:forEach>
						</div>
						<div id="doctor" class="hide">
							<div class="talktalk">
								<div class="talker">
									<a href="javascript:void(0);"><img src="${ctx}/images/jyw.jpg" alt="" width="50" height="50" class="head" /></a>
								</div>
								<div class="talkcont">
									<p><a href="javascript:void(0);">锦衣卫</a>：欧洲杯来了！我支持湖人队，因为我喜欢林丹，她跨栏那么厉害，基本不用抢七就能一杆清台的，她提拉弧旋球也很强，过弯很流畅，入水都没有水花的。最帅的是打小鸟球基本上不用背越式，直接跳发，托马斯全旋接一个全垒打，对方的四分卫就算是黑带也经常来不及使出盛装舞步就直接被将死</p>
									<div class="extension">
										<div class="talktime"><span>昨天&nbsp;24:01</span></div>
									</div>
								</div>
							</div>
						</div>
						<div id="user" class="hide">
							<div class="talktalk">
								<div class="talker">
									<a href="javascript:void(0);"><img src="${ctx}/images/lp.jpg" alt="" width="50" height="50" class="head"/></a>
								</div>
								<div class="talkcont">
									<p><a href="javascript:void(0);">老婆</a>：欧洲杯来了！我支持湖人队，因为我喜欢林丹，她跨栏那么厉害，基本不用抢七就能一杆清台的，她提拉弧旋球也很强，过弯很流畅，入水都没有水花的。最帅的是打小鸟球基本上不用背越式，直接跳发，托马斯全旋接一个全垒打，对方的四分卫就算是黑带也经常来不及使出盛装舞步就直接被将死</p>
									<div class="extension">
										<div class="talktime"><span>昨天&nbsp;24:01</span></div>
									</div>
								</div>
							</div>
						</div>
						<div id="tagnews" class="hide">
							<div class="talktalk">
								<div class="talker">
									<a href="javascript:void(0);"><img src="${ctx}/images/boss.jpg" alt="" width="50" height="50" class="head"/></a>
								</div>
								<div class="talkcont">
									<p><a href="javascript:void(0);">BOSS</a>：欧洲杯来了！我支持湖人队，因为我喜欢林丹，她跨栏那么厉害，基本不用抢七就能一杆清台的，她提拉弧旋球也很强，过弯很流畅，入水都没有水花的。最帅的是打小鸟球基本上不用背越式，直接跳发，托马斯全旋接一个全垒打，对方的四分卫就算是黑带也经常来不及使出盛装舞步就直接被将死</p>
									<div class="extension">
										<div class="talktime"><span>昨天&nbsp;24:01</span></div>
									</div>
								</div>
							</div>
						</div>
					</dd>
				</dl>
			</div>
			<div class="recommendinfo">
				<div class="tips">
					<div class="tip">
						<div class="tiptitle clearfix">
							<h2>健康小贴士</h2>
							<a href="#">我也写</a>
						</div>
						<div class="tipcontent">
							<p>反正就是一些小贴士啦，健康相关你懂的，人写的，还要搞什么审核来着？</p>
							<p class="tipwriter">——<a href="#">阿猫阿狗</a></p>
							<p><a href="#">阅读更多&raquo;</a></p>
						</div>
					</div>
				</div>
				<div class="famousdoc">
					<div class="famous">
						<h2>名家推荐</h2>
						<div class="attimg">
							<a href="javascript:void(0);"><img src="${ctx}/images/cjz.jpg" alt="" class="head"/></a><a href="javascript:void(0);"><img src="${ctx}/images/cjz.jpg" alt="" class="head"/></a><a href="javascript:void(0);"><img src="${ctx}/images/cjz.jpg" alt="" class="head"/></a><a href="javascript:void(0);"><img src="${ctx}/images/cjz.jpg" alt="" class="head"/></a><a href="javascript:void(0);"><img src="${ctx}/images/cjz.jpg" alt="" class="head"/></a><a href="javascript:void(0);"><img src="${ctx}/images/cjz.jpg" alt="" class="head"/></a><a href="javascript:void(0);"><img src="${ctx}/images/cjz.jpg" alt="" class="head"/></a><a href="javascript:void(0);"><img src="${ctx}/images/cjz.jpg" alt="" class="head"/></a><span><a href="">更多&raquo;</a></span>
						</div>
					</div>
				</div>
				<div class="recdoc">
					<div class="recommend">
						<h2>您可能感兴趣的</h2>
						<div class="attimg">
							<a href="javascript:void(0);"><img src="${ctx}/images/cjz.jpg" alt="" class="head"/></a><a href="javascript:void(0);"><img src="${ctx}/images/cjz.jpg" alt="" class="head"/></a><a href="javascript:void(0);"><img src="${ctx}/images/cjz.jpg" alt="" class="head"/></a><a href="javascript:void(0);"><img src="${ctx}/images/cjz.jpg" alt="" class="head"/></a><a href="javascript:void(0);"><img src="${ctx}/images/cjz.jpg" alt="" class="head"/></a><a href="javascript:void(0);"><img src="${ctx}/images/cjz.jpg" alt="" class="head"/></a><a href="javascript:void(0);"><img src="${ctx}/images/cjz.jpg" alt="" class="head"/></a><a href="javascript:void(0);"><img src="${ctx}/images/cjz.jpg" alt="" class="head"/></a><span><a href="">更多&raquo;</a></span>
						</div>
					</div>
				</div>
				<div class="attinfo">
					<div class="att">
						<h2>我关注的大夫</h2>
						<div class="attimg">
							<a href="#"><img src="${ctx}/images/cjz.jpg" alt="" width="30" height="30" /></a><a href="#"><img src="${ctx}/images/cjz.jpg" alt="" width="30" height="30" /></a><a href="#"><img src="${ctx}/images/cjz.jpg" alt="" width="30" height="30" /></a><a href="#"><img src="${ctx}/images/cjz.jpg" alt="" width="30" height="30" /></a><span><a href="#">更多&raquo;</a></span>
						</div>
					</div>
				</div>
				<div class="taginfo">
					<h2>关注的标签</h2>
					<div id="tags" class="tags clearfix">
						<div class="tag"><a href="#" class="tagname">养生</a><a href="javascript:void(0)" class="close">×</a></div>
						<div class="tag"><a href="#" class="tagname">中医</a><a href="javascript:void(0)" class="close">×</a></div>
						<div class="tag"><a href="#" class="tagname">西医</a><a href="javascript:void(0)" class="close">×</a></div>
						<div class="tag"><a href="#" class="tagname">保健</a><a href="javascript:void(0)" class="close">×</a></div>
						<div class="tag"><a href="#" class="tagname">中西医</a><a href="javascript:void(0)" class="close">×</a></div>
						<div class="tag"><a href="#" class="tagname">减肥</a><a href="javascript:void(0)" class="close">×</a></div>
						<div class="tag"><a href="#" class="tagname">医疗器械</a><a href="javascript:void(0)" class="close">×</a></div>
						<div class="tag"><a href="#" class="tagname">药品质量</a><a href="javascript:void(0)" class="close">×</a></div>
						<div class="tag"><a href="#" class="tagname">针灸</a><a href="javascript:void(0)" class="close">×</a></div>
					</div>
				</div>
				<div class="hottaginfo">
					<h2>热门标签</h2>
					<p id="cloud">
						<a href="#">养生</a><a href="#">中医</a><a href="#">西医</a>
						<a href="#">保健</a><a href="#">中西医</a><a href="#">减肥</a>
						<a href="#">医疗器械</a><a href="#">药品质量</a><a href="#">针灸</a>
					</p>
					<script type="text/javascript">
						var cloud = new SWFObject("${ctx}/js/tagcloud.swf", "cloud", "180", "180", "9", "transparent");
						var content = '<tags><a href="http://www.google.com.hk" style="font-size:8px;">养生</a><a href="#" style="font-size:10px;">中医</a><a href="#" style="font-size:14px;">西医</a><a href="#" style="font-size:20px;">保健</a><a href="http://www.google.com.hk" style="font-size:13px;">中西医</a><a href="#" style="font-size:20px;">减肥</a><a href="#" style="font-size:20px;">医疗器械</a><a href="#" style="font-size:9px;">药品质量</a><a href="#" style="font-size:17px;">针灸</a></tags>';
						cloud.addParam("wmode", "transparent");
						cloud.addParam("allowScriptAccess", "always");
						cloud.addVariable("tcolor", "0xFFFFFF");
						cloud.addVariable("tcolor2", "0xFFFFFF");
						cloud.addVariable("hicolor", "0x999999");
						cloud.addVariable("tspeed", "150");
						cloud.addVariable("distr", "true");
						cloud.addVariable("mode", "tags");
						cloud.addVariable("tagcloud",encodeURIComponent(content));
						cloud.write("cloud");
					</script>
				</div>
				<div class="visitor">
					<dl id="recentvis">
						<dt class="vistab clearfix">
							<a href="javascript:void(0)" rel="#rencentvr" class="selected">最近访客</a><a href="javascript:void(0)" rel="#rencentgt">最近访问</a>
						</dt>
						<dd class="viscont">
							<div id="rencentvr" class="clearfix">
								<a href="#"><img src="${ctx}/images/fk.jpg" alt="zm" width="50" height="50" /></a>
								<a href="#"><img src="${ctx}/images/fk.jpg" alt="zm" width="50" height="50" /></a>
								<a href="#"><img src="${ctx}/images/fk.jpg" alt="zm" width="50" height="50" /></a>
								<a href="#"><img src="${ctx}/images/fk.jpg" alt="zm" width="50" height="50" /></a>
								<a href="#"><img src="${ctx}/images/fk.jpg" alt="zm" width="50" height="50" /></a>
							</div>
							<div id="rencentgt" class="hide clearfix">
								<a href="#"><img src="${ctx}/images/fk.jpg" alt="zm" width="35" height="35" /></a>
								<a href="#"><img src="${ctx}/images/fk.jpg" alt="zm" width="35" height="35" /></a>
							</div>
						</dd>
					</dl>
				</div>
			</div>
			<%@ include file="/common/foot.jsp"%>
		</div>
		<div class="card" id="ucard">
			<div class="perins">
				<img src="" alt="" />
				<p class="c-name"><a href="javascript:void(0);">name</a></p>
				<p class="c-instr">summary</p>
				<p class="c-att">
					<span>被关注:<b>21</b></span><span>关注:<b>121</b></span>
				</p>
			</div>
			<div class="perfun">
				<a href="" class="attention">guanzhu</a>
			</div>
		</div>
		<script type="text/javascript">
			function submitTalk() { // 发布说说
				var content = $("#mytalk").val();
				if(content.length > 255) {
					alert("输入字数最多255");
				}
				if(content.length > 0 && content.length <= 255) {
					$.ajax({
						type: "POST",
						url:"user-talk.html",
						data: {content:content},
						dataType: "json",
						success: function(jsonStr) {
						    var json = $.parseJSON(jsonStr);
							var obj = "<div class='talktalk'>" +
						     				"<div class='talker'>" +
												"<a href='javascript:void(0);'><img src='${ctx}/" + json.headUrl + "' alt='' width='50' height='50' class='head' /></a>" +
											"</div>" +
											"<div class='talkcont'>" +
												"<p><a href='javascript:void(0);'>" + json.name + "</a>：" + json.content + "</p>" +
												"<div class='extension'>" +
													"<div class='talktime'>" + 
														"<span>" + json.talkDate + "</span></div>"+
													"</div>" +
												"</div>" +
										"</div>";
						     $("div[id=all]").prepend(obj);
						     $("#mytalk").val("");
						}
					});
				}
			}
			
			setInterval(freshTalkCount,15000);// 定时请求服务器
			
			function freshTalkCount(){// 向服务器查询有多少条新发布的说说
				$.ajax({
					type: "POST",
					url:"user-fresh-talk-count.html",
					dataType: "json",
					success: function(jsonStr) {
						if(jsonStr != 0){
							alert("有" + jsonStr + "条新说说");
						}
					}
				});
			}
			
			function getFreshTalk(){// 用于点击以后，浏览器向服务器请求新发布的说说
				$.ajax({
					type: "POST",
					url:"user-fresh-talk.html",
					dataType: "json",
					success: function(jsonStr) {
					    alert(jsonStr);
					    var json = $.parseJSON(jsonStr);
					    alert(json[0]);
					}
				});
			}
			
			function showmore(){
				alert("显示更多");
				$.ajax({
					type: "POST",
					url:".html",
					dataType: "json",
					success: function(jsonStr) {
					    alert(jsonStr);
					    
					}
				});
			}
			
			
			$(document).ready(function(){
				
				
				// tab选项卡切换效果，统一格式：dl>(dt>a*N)+(dd>div*N)，a的rel属性等于#+div的id
				var tabs = function(event){
					alert("rrrr");
					var target = $(this.rel);
					$(this).addClass(event.data.cls).siblings().removeClass(event.data.cls);
					$(target).show().siblings('div').hide();
				};
				$('#newsmenu>dt>a').bind('click', {cls:'selected'}, tabs);
				
			});
			
		</script>
	</body>
</html>